<!--apps/page/template/custom_sale_along_time-->
{% extends 'custom_base_site.html' %}
{% block chart %}
    <script src="/static/vue/vue.js"></script>

    <link rel="stylesheet" href="/static/vue-element/vue-element.css">
    <script src="/static/vue-element/vue-element.js"></script>

    <script src="/static/highcharts/highcharts.js"></script>
    <script src="/static/highcharts/highcharts-more.js"></script>
    <script src="/static/highcharts/modules/exporting.js"></script>
    <script src="/static/highcharts/modules/export-data.js"></script>
    <script src="/static/highcharts/modules/oldie.js"></script>

    <script src="/static/moment/moment.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <script src="/static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

    <link rel="stylesheet" href="/static/bootstrap-select/css/bootstrap-select.min.css">
    <script src="/static/bootstrap-select/js/bootstrap-select.min.js"></script>

    <script src="/static/html-util.js"></script>
    <script src="/static/string-format.js"></script>

    <!-- chart -->
    <div id="container" style="min-width:400px;height:400px"></div>
    <!-- chart end -->
    <div class="form-inline">
        <!-- target selector -->
        <select id="target-selector" class="selectpicker" data-width="fit">
            <option data-tokens="amount" value="amount">销售额</option>
            <option data-tokens="interests" value="interests">毛利润</option>
        </select>
        <script>
            let target = "amount";  // amount interests
            $targetSelector = $("#target-selector");
        </script>
        <!-- target selector end -->
        <!-- period selector -->
        <select id="period-selector" class="selectpicker" data-width="fit">
            <option data-tokens="A" value="A-DEC">年</option>
            <option data-tokens="Q-DEC" value="Q-DEC">季</option>
            <!-- quarterly frequency, year ends in December. -->
            <option data-tokens="M" value="M">月</option>
            <option data-tokens="W-SUN" value="W-SUN">星期</option>  <!-- weekly frequency (Mondays). -->
            <option data-tokens="D" value="D" selected>日</option>
        </select>
        <script>
            let period = "D";
            $periodSelector = $("#period-selector");
        </script>
        <!-- period selector end -->
        <!-- type selector -->
        <select id="type-selector" class="selectpicker" data-width="fit">
            <option data-tokens="column" value="column">柱状图</option>
            <option data-tokens="line" value="line">折线图</option>
            <option data-tokens="area" value="area">面积图</option>
        </select>
        <script>
            // init set
            let type = "column";  // amount interests
            $typeSelector = $("#type-selector");
            $typeSelector.selectpicker('val', type);
        </script>
        <!-- type selector end -->
        <!-- date picker -->
        <div class='input-group date' id='datetimepicker-start'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon"><span
                    class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div class='input-group date' id='datetimepicker-end'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon"><span
                    class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <!-- date picker end -->
        <!--- form-group input-group -->
    </div>
    <script type="text/javascript">
        $(function () {
        });
        let start = moment().startOf('year'),
            end = moment();
        // moment(new Date()) moment().toDate()
        $dp_start = $('#datetimepicker-start');
        $dp_end = $('#datetimepicker-end');
        $dp_start.datetimepicker({
            format: 'YYYY-MM-DD',
            showTodayButton: true,
            defaultDate: start,
        });
        $dp_end.datetimepicker({
            format: 'YYYY-MM-DD',
            showTodayButton: true,
            defaultDate: end,
        });
        $dp_start.on("dp.change", function (event) {
            // event.date instanceof moment === true
            $dp_end.data("DateTimePicker").minDate(event.date);
        });
        $dp_end.on("dp.change", function (event) {
            // event.date instanceof moment === true
            $dp_start.data("DateTimePicker").maxDate(event.date);
        });


        let scheme = "",
            domain = "",
            base_url = "{scheme}{domain}".format({"scheme": scheme, "domain": domain}),
            bath_path = "/api-analysis/sale_along_time",
            para_path = "/target/{target}/period/{period}/from/{start}/to/{end}".format({
                "target": target,
                "period": period,
                "start": start.format("YYYY-MM-DD"),
                "end": end.format("YYYY-MM-DD")
            }),
            url = "{0}{1}{2}".format(base_url, bath_path, para_path);
        // scheme domain path     `https://`  `www.redfoxatasleep.com`  `/base/path`  `/para/path`  `?key=stringValue`


        let chart, chartOptions, min, max, response;
        $.get(url, function (data, status) {
            response = data;
            min = new Date(response["min"]);
            max = new Date(response["max"]);
            $dp_start.data("DateTimePicker").minDate(min);
            $dp_end.data("DateTimePicker").maxDate(max);

            console.log(response["series"]);

            chartOptions = {
                "chart": {
                    "type": type,
                    "zoomType": 'x',
                    "panning": true,
                    "panKey": 'shift'
                },

                "title": {
                    "text": "Sale {0} Along Time".format({"amount": "Amount", "interests": "Interests"}[target])
                },

                "subtitle": {
                    "text": 'Click and drag to zoom in. Hold down shift key to pan.'
                },

                "xAxis": {
                    "type": 'datetime',
                    "title": "时间",
                    "dateTimeLabelFormats": {
                        "millisecond": '%H:%M:%S.%L',
                        "second": '%H:%M:%S',
                        "minute": '%H:%M',
                        "hour": '%H:%M',
                        "day": '%m-%d',
                        "week": '%m-%d',
                        "month": '%Y-%m',
                        "year": '%Y'
                    }
                },

                "yAxis": {
                    "title": {
                        "text": "销售额"
                    }
                },

                "legend": {
                    "enabaled": true,
                    "align": "center",
                    "itemHiddenStyle": {
                        "color": "gray"
                    }

                },

                "tooltip": {
                    "dateTimeLabelFormats": {
                        "millisecond": '%H:%M:%S.%L',
                        "second": '%H:%M:%S',
                        "minute": '%H:%M',
                        "hour": '%H:%M',
                        "day": '%Y-%m-%d',
                        "week": '%m-%d',
                        "month": '%Y-%m',
                        "year": '%Y'
                    }
                },
                "series": response["series"]
            };
            chart = Highcharts.chart('container', chartOptions);
        });


        $dp_start.on("dp.change", function (event) {
            // event.date instanceof moment === true
            start = event.date;
            para_path = "/target/{target}/period/{period}/from/{start}/to/{end}".format({
                "target": target,
                "period": period,
                "start": start.format("YYYY-MM-DD"),
                "end": end.format("YYYY-MM-DD")
            });
            url = "{0}{1}{2}".format(base_url, bath_path, para_path);
            $.get(url, function (data, status) {
                // data: response from server
                chart.destroy();
                chartOptions["series"] = data["series"];
                chart = Highcharts.chart('container', chartOptions);
                chart.update({
                    "chart": {
                        "type": type,
                        "zoomType": 'x',
                        "panning": true,
                        "panKey": 'shift'
                    },
                })
            });
        });
        $dp_end.on("dp.change", function (event) {
            // event.date instanceof moment === true
            end = event.date;
            para_path = "/target/{target}/period/{period}/from/{start}/to/{end}".format({
                "target": target,
                "period": period,
                "start": start.format("YYYY-MM-DD"),
                "end": end.format("YYYY-MM-DD")
            });
            url = "{0}{1}{2}".format(base_url, bath_path, para_path);
            $.get(url, function (data, status) {
                // data: response from server
                chart.destroy();
                chartOptions["series"] = data["series"];
                chart = Highcharts.chart('container', chartOptions);
                chart.update({
                    "chart": {
                        "type": type,
                        "zoomType": 'x',
                        "panning": true,
                        "panKey": 'shift'
                    },
                })
            });
        });
        $periodSelector.on(
            'changed.bs.select',
            function (e, clickedIndex, isSelected, previousValue) {
                let selectedOption = event.target[clickedIndex];
                period = selectedOption.value;
                // event.date instanceof moment === true
                para_path = "/target/{target}/period/{period}/from/{start}/to/{end}".format({
                    "target": target,
                    "period": period,
                    "start": start.format("YYYY-MM-DD"),
                    "end": end.format("YYYY-MM-DD")
                });
                url = "{0}{1}{2}".format(base_url, bath_path, para_path);
                $.get(url, function (data, status) {
                    // data: response from server
                    chart.destroy();
                    chartOptions["series"] = data["series"];
                    chart = Highcharts.chart('container', chartOptions);
                    chart.update({
                        "chart": {
                            "type": type,
                            "zoomType": 'x',
                            "panning": true,
                            "panKey": 'shift'
                        },
                    })
                });

            }
        );
        $targetSelector.on(
            'changed.bs.select',
            function (e, clickedIndex, isSelected, previousValue) {
                let selectedOption = event.target[clickedIndex];
                target = selectedOption.value;
                // event.date instanceof moment === true
                para_path = "/target/{target}/period/{period}/from/{start}/to/{end}".format({
                    "target": target,
                    "period": period,
                    "start": start.format("YYYY-MM-DD"),
                    "end": end.format("YYYY-MM-DD")
                });
                url = "{0}{1}{2}".format(base_url, bath_path, para_path);
                $.get(url, function (data, status) {
                    // data: response from server
                    chart.destroy();
                    chartOptions["series"] = data["series"];
                    chartOptions["title"]["text"] = "Sale {0} Along Time".format({
                        "amount": "Amount",
                        "interests": "Interests"
                    }[target]);
                    chart = Highcharts.chart('container', chartOptions);
                    chart.update({
                        "chart": {
                            "type": type,
                            "zoomType": 'x',
                            "panning": true,
                            "panKey": 'shift'
                        },
                    })
                });

            }
        );
        $typeSelector.on(
            'changed.bs.select',
            function (e, clickedIndex, isSelected, previousValue) {
                let selectedOption = event.target[clickedIndex];
                type = selectedOption.value;
                chart.update({
                    "chart": {
                        "type": type,
                        "zoomType": 'x',
                        "panning": true,
                        "panKey": 'shift'
                    },
                })
            }
        );
    </script>


{% endblock %}


